<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp" %>
<!DOCTYPE>
<html>
  <head>
    <base href="<%=basePath %>">
    <title>Untitled</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<%@include file="/views/global/include.jsp" %>
	
	<link rel="stylesheet" type="text/css" href="static/javascript/global/jcrop/css/jquery.Jcrop.css">
  </head>
  
  <body>
  	<form name="uploadForm" action="upload" method="post" enctype="multipart/form-data" class="validate">
		<div class="form-group">
			<input name="file" type="file" title="Please select your file" accept="jpg|jpeg|bmp|gif|png"/>
		</div>
		<div>
			<button type="button" id="btnUpload" class="btn btn-info">Start Upload</button>
		</div>
	</form>
	<img id="JcropImg" src="http://file.mixuan.org/download/2573d5852cde43ca8f837186797e29c6.jpg"/>
	<button type="button" id="btnSave" class="btn btn-default"> Save </button>
 	<%@include file="/views/global/AdminScripts.jsp" %>
 	<script type="text/javascript" src="static/javascript/global/jcrop/js/jquery.Jcrop.min.js"></script>
  </body>
<script type="text/javascript">
$(document).ready(function(){
	var jcrop_api;
	$("#JcropImg").Jcrop({
		aspectRatio: 1,
		allowSelect: false
	}, function(){
		jcrop_api = this;
		var bounds = jcrop_api.getWidgetSize();
		var size = (bounds[0]<bounds[1]?bounds[0]:bounds[1]);
		jcrop_api.animateTo([0, 0, size, size]);
	});
	
	$("#btnUpload").bind("click", function(){
		var validator = $(uploadForm).validate({meta:"validate"});
		if(validator.form()){
			$(uploadForm).goAjax({
				semantic:false,
				data:{},
				success: function(jsonData) {
					if("SUCCESS" == jsonData.state){
						$("#JcropImg").attr("src", jsonData.url);
					} else {
						$("#JcropImg").attr("src", "");
						art.dialog({title:"ERROR", icon: "error", content: "上传失败"});
					}
				}
			});
		}
	});
	
	$("#btnSave").click(function(){
		console.log(jcrop_api.tellSelect());
	});
});
</script>
</html>
